<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script th:src="@{../static/js/axios.js}"></script>
    <script th:src="@{../static/js/vue.js}"></script>
    <script th:src="@{../static/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{../static/elementui/index.css}">
</head>
<body>
<div id="app">
    <center><h1>登录页面</h1></center>
    <el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
        <el-form-item label="用户名" prop="pass">
            <el-input type="password" v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="checkPass">
            <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="region">
            <el-select v-model="user.roleId" placeholder="请选择">
                <el-option v-for="r in roleList" :label="r.roleName=='ROLE_CENTER'?'中心管理':'运营管理'" :value="r.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button type="success" @click="registerUser()">注册</el-button>
            <el-button type="warning" @click="resetForm()">清空</el-button>
        </el-form-item>
    </el-form>
    <!--注册-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="formData" :inline="true">
            <el-form-item label="用户名">
                <el-input v-model="formData.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formData.password" prop="checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="region">
                <el-select v-model="formData.roleId" placeholder="请选择">
                    <el-option v-for="r in roleList" :label="r.roleName=='ROLE_CENTER'?'中心管理':'运营管理'" :value="r.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{
            },
            password:'',
            dialogFormVisible: false,
            roleList:[],
            formData:{}
        },
        methods:{
            submitForm(){
                  axios.post("/goods/login",this.user).then(res=>{
                      if (res.data.code==0){
                          this.$message({
                              message:res.data.message,
                              type:'success'
                          })
                          location.href="/goods/showList"
                      } else {
                          this.$message.error(res.data.message)
                      }

                  })
            },
            registerUser(){
                this.title = '注册信息';
                this.dialogFormVisible = true;
                this.formData = {};
            },
            save(){
                axios.post("/goods/register",this.formData).then(res=>{
                    if (res.data.code==0){
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.error("信息有误")
                    }
                })
            },
            initData(){
                axios.post("/goods/findRole").then(res=>{
                    this.roleList=res.data;
                })
            },
            resetForm(){
                this.user={};
                this.password=''
            }
        },
        created(){
            this.initData()
        }
    })
</script>
</body>
</html>